<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			tr:nth-last-child(2n) {
				background-color: sandybrown;
			}
		</style>
	</head>

	<body>
		<table id="tab" width="500px" border="1" cellspacing="" cellpadding="">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>邮箱</td>
				<td>手机</td>
			</tr>
		</table>
		<input type="button" id="butn" value="加载列表" />
		<script src="/static/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function () {
				$("#butn").on("click",function () {
					$.ajax({
						type:"post",
						url:"/Studentlist/listshtml",
						success:function (data) {
							for (var i=0;i<data.length;i++) {
								$tr=$("<tr></tr>");
								$tr.append("<td>"+data[i].id+"</td>");
								$tr.append("<td>"+data[i].name+"</td>");
								$tr.append("<td>"+data[i].sex+"</td>");
								$tr.append("<td>"+data[i].age+"</td>");
								$tr.append("<td>"+data[i].email+"</td>");
								$tr.append("<td>"+data[i].phone+"</td>");
								$("#tab").append($tr);
							}
						}
					});
				});
			});
		</script>
	</body>

</html>